<template>
  <div class="svgIcons">
    <p class="title">
      <a href="https://panjiachen.github.io/vue-element-admin-site/#/icon">添加和使用方式</a>
    </p>
    <div class="icons clearfix">
      <el-tooltip  v-for="name in iconNames" :key="name" effect="dark" :content="name | svgRef" placement="top">
        <div  class="iconWrapper">
          <svg-icon :iconClass="name"></svg-icon>
          <div class="text" v-text="name"></div>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
    import generateIcons from './generateIcons'
    export default {
      name: "svg-icons",
      data: function () {
        return {
          iconNames: generateIcons.iconNames
        }
      },
      filters: {
        svgRef: function (name) {
          return "<svg-icon :iconClass=\"" + name + " \"/>"
        }
      }
    }
</script>

<style lang="scss" scoped>
  .svgIcons{
    margin: 10px 20px 0;

    .title{
      background: rgba(66, 185, 131, 0.1);
      padding: 20px;
      border-radius: 1px;

      a {
        color: #42b983;
        font-weight: 600;
      }
    }

    .icons{
      .iconWrapper{
        float: left;
        margin: 20px;
        width: 110px;
        height: 110px;
        font-size: 30px;
        text-align: center;

        .text{
          font-size: 24px;
          line-height: 1;
          text-align: center;
          white-space: nowrap;
          margin-top: 10px;
        }
      }
    }
  }
</style>
